<template>
  <view class="classification-page">
    <!-- 导航 -->
    <view class="bg">
      <c-navBar title="全部商品" isPerch isTran :isBack="true"></c-navBar>

      <!-- 搜索 -->
      <view class="search" @click="$fn.jumpPage('/pages/goods/pages/scarch')">
        <input type="text" disabled v-model="keywords" placeholder="搜索商品" />
        <view class="se-btn">搜索</view>
      </view>
    </view>

    <!-- 商品分类列表 -->
    <c-classify
      @click="jumpDetail"
      ref="list"
      :keywords="keywords"
      :api="getGoods"
      type="1"
      :scrHeight="0"
      :category="option.id"
    ></c-classify>
  </view>
</template>

<script>
export default {
  data() {
    return {
      getGoods: this.$api.allProductsList, //右侧列表方法
      keywords: "",
      option: {},
      apiParams: { categoryId: "1" },
    };
  },
  onLoad(option) {
    this.option = option;
  },
  onShow() {
    let lifeData = uni.getStorageSync("lifeData");
    if (lifeData) {
      this.getCartNum();
    }
  },
  methods: {
    // 获取购物车数据
    getCartNum() {
      this.$api.getCartNumY().then((res) => {
        if (res.data > 0) {
          uni.setTabBarBadge({
            index: 3,
            text: String(res.data),
          });
        } else {
          uni.removeTabBarBadge({
            index: 3,
          });
        }
      });
    },

    // 查看详情
    jumpDetail(val) {
      uni.navigateTo({
        url: "/pages/goods/pages/goodsDetails?id=" + val.id,
      });
    },
    // 搜索商品
    searchGoods() {
      this.$refs.list.refresh();
    },
  },
};
</script>

<style lang="scss" scoped>
.classification-page {
  height: 100vh;
  overflow: hidden;
}

.bg {
  width: 750rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}

.top_nav {
  z-index: 10;
  color: #1a1a1a;
  font-size: 32rpx;
  font-weight: 700;
  top: 0;
  width: 100%;

  .nav {
    display: flex;
    align-items: center;
    justify-content: center;

    .tabbar-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #1a1a1a;
      line-height: 42rpx;
    }
  }
}

.search {
  width: 710rpx;
  height: 72rpx;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 40rpx;
  margin-left: 28rpx;
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  border-radius: 40rpx 40rpx 40rpx 40rpx;
  border: 1rpx solid black;

  input {
    width: 100%;
    padding-left: 32rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #666666;
    line-height: 60rpx;
  }

  .se-btn {
    width: 120rpx;
    height: 64rpx;
    background: linear-gradient(135deg, #2ad03d 0%, #00b815 100%);
    margin-right: 6rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 62rpx;
    flex: none;
  }
}
</style>
